<template>
    <div class="top">
        <img src="../../assets/img/头部.png" alt="">
    </div>
    <div class="details-top">
        <router-link :to="'/home'" class="details-top-left">
            <img src="@/assets/img/左箭头.png" alt="">
        </router-link>
        <div class="details-input-wrapper">
            <img src="@/assets/img/放大镜.png" alt="">
            <input class="details-input1" type="text" placeholder="请输入商品名称搜索">
        </div>
    </div>
    <div class="index-mid-mid">
        <div class="mid-left">
            <img src="@/assets/img/沃尔玛.png" alt="">
        </div>
        <div class="mid-right">
            <div class="mid-right-top">
                <span>沃尔玛</span>
            </div>
            <div class="mid-right-mid">
                <div>
                    <span>月售1万+</span>
                </div>
                <div>
                    <span>起送¥0</span>
                </div>
                <div>
                    <span>基础运费¥5</span>
                </div>
            </div>
            <div class="mid-right-bottom">
                <span>VIP尊享满89元减4元运费券（每月3张）</span>
            </div>
        </div>
    </div>
    <div class="details-content">
        <div class="details-content-left">
            <div class="details-left-wrapper1">
                <span>全部商品</span>
            </div>
            <div class="details-left-wrapper">
                <span>秒杀</span>
            </div>
            <div class="details-left-wrapper">
                <span>新鲜水果</span>
            </div>
            <div class="details-left-wrapper">
                <span>休闲食品</span>
            </div>
            <div class="details-left-wrapper">
                <span>时令蔬菜</span>
            </div>
            <div class="details-left-wrapper">
                <span>肉蛋家禽</span>
            </div>
        </div>
        <div class="details-content-right">
            <div class="details-content-right-left">
                <div class="details-content-right-left-zuo">
                    <img src="@/assets/img/番茄.png" alt="">
                </div>
                <div class="details-content-right-left-you">
                    <div class="details-content-right-left-you-top">
                        <span>番茄250g/份</span>
                        <span>月售10件</span>
                    </div>
                    <div class="details-content-right-left-you-bottom">
                        <span>¥33.6</span>
                        <span>¥33.6</span>
                    </div>
                </div>
            </div>
            <div class="details-content-right-right">
                <div class="fixed">
                    <img v-if="number >= 1" @click="reduce" src="@/assets/img/-.png" alt="">
                </div>
                <div class="fixed">
                    <span v-if="number >= 1">{{ number }}</span>
                </div>
                <div class="fixed">
                    <img @click="add" src="@/assets/img/+.png" alt="">
                </div>
            </div>
        </div>
        <div class="details-fgx"></div>
        <div class="details-content-right">
            <div class="details-content-right-left">
                <div class="details-content-right-left-zuo">
                    <img src="@/assets/img/提子.png" alt="">
                </div>
                <div class="details-content-right-left-you">
                    <div class="details-content-right-left-you-top">
                        <span>提子250g/份</span>
                        <span>月售10件</span>
                    </div>
                    <div class="details-content-right-left-you-bottom">
                        <span>¥33.6</span>
                        <span>¥33.6</span>
                    </div>
                </div>
            </div>
            <div class="details-content-right-right">
                <div class="fixed">
                    <img v-if="number1 >= 1" @click="reduce1" src="@/assets/img/-.png" alt="">
                </div>
                <div class="fixed">
                    <span v-if="number1 >= 1">{{ number1 }}</span>
                </div>
                <div class="fixed">
                    <img @click="add1" src="@/assets/img/+.png" alt="">
                </div>
            </div>
        </div>
        <div class="details-fgx"></div>
        <div class="details-content-right">
            <div class="details-content-right-left">
                <div class="details-content-right-left-zuo">
                    <img src="@/assets/img/螃蟹.png" alt="">
                </div>
                <div class="details-content-right-left-you">
                    <div class="details-content-right-left-you-top">
                        <span>螃蟹250g/份</span>
                        <span>月售10件</span>
                    </div>
                    <div class="details-content-right-left-you-bottom">
                        <span>¥33.6</span>
                        <span>¥33.6</span>
                    </div>
                </div>
            </div>
            <div class="details-content-right-right">
                <div class="fixed">
                    <img v-if="number2 >= 1" @click="reduce2" src="@/assets/img/-.png" alt="">
                </div>
                <div class="fixed">
                    <span v-if="number2 >= 1">{{ number2 }}</span>
                </div>
                <div class="fixed">
                    <img @click="add2" src="@/assets/img/+.png" alt="">
                </div>
            </div>
        </div>
        <div class="details-fgx"></div>
        <div class="details-content-right">
            <div class="details-content-right-left">
                <div class="details-content-right-left-zuo">
                    <img src="@/assets/img/橙子.png" alt="">
                </div>
                <div class="details-content-right-left-you">
                    <div class="details-content-right-left-you-top">
                        <span>橙子250g/份</span>
                        <span>月售10件</span>
                    </div>
                    <div class="details-content-right-left-you-bottom">
                        <span>¥33.6</span>
                        <span>¥33.6</span>
                    </div>
                </div>
            </div>
            <div class="details-content-right-right">
                <div class="fixed">
                    <img v-if="number3 >= 1" @click="reduce3" src="@/assets/img/-.png" alt="">
                </div>
                <div class="fixed">
                    <span v-if="number3 >= 1">{{ number3 }}</span>
                </div>
                <div class="fixed">
                    <img @click="add3" src="@/assets/img/+.png" alt="">
                </div>
            </div>
        </div>
        <div class="details-fgx"></div>
    </div>
    <div class="details-bottom">
        <div class="details-bottom-left">
            <div class="detail-image">
                <div v-if="number != 0 || number1 != 0 || number2 != 0 || number3 != 0">
                    <img @click="change" src="@/assets/img/购物篮.png" alt="">
                </div>
                <div v-else>
                    <img src="@/assets/img/购物篮0.png" alt="">
                </div>
            </div>
            <div class="detail-writting">
                <div v-if="number != 0 || number1 != 0 || number2 != 0 || number3 != 0">
                    <span>总计：</span>
                    <span>¥128</span>
                </div>
                <div v-else>
                    <span>购物车是空的</span>
                </div>
            </div>
        </div>
        <router-link  :to="'/clearing'" class="details-bottom-right">
            <span>去结算</span>
        </router-link>
    </div>
    <div @click="change" class="discount_wrapper" v-if="isShowModal == false">
        <div class="main_discount">
            <div class="mask-top">
                <div class="main_discount-left">
                    <img src="@/assets/img/全选.png" alt="">
                    <span>全选</span>
                </div>
                <div class="main_discount-right">
                    <span>清空购物车</span>
                </div>
            </div>
            <div class="mask-content">
                <div class="mask-content-left">
                    <div class="mask-content-left-left">
                        <img src="@/assets/img/全选.png" alt="">
                        <img src="@/assets/img/番茄.png" alt="">
                    </div>
                    <div class="mask-content-left-right">
                        <div class="mask-content-left-top">
                            <span>番茄250g/份</span>
                        </div>
                        <div class="mask-content-left-bottom">
                            <span>¥33.6</span>
                            <span>¥33.6</span>
                        </div>
                    </div>
                </div>
                <div class="mask-content-right">
                    <img src="@/assets/img/-.png" alt="">
                    <span>1</span>
                    <img src="@/assets/img/+.png" alt="">
                </div>
            </div>
            <div class="mask-content">
                <div class="mask-content-left">
                    <div class="mask-content-left-left">
                        <img src="@/assets/img/全选.png" alt="">
                        <img src="@/assets/img/提子.png" alt="">
                    </div>
                    <div class="mask-content-left-right">
                        <div class="mask-content-left-top">
                            <span>提子250g/份</span>
                        </div>
                        <div class="mask-content-left-bottom">
                            <span>¥33.6</span>
                            <span>¥33.6</span>
                        </div>
                    </div>
                </div>
                <div class="mask-content-right">
                    <img src="@/assets/img/-.png" alt="">
                    <span>1</span>
                    <img src="@/assets/img/+.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref } from "vue";
import { navData } from "@/untils/nav"
export default {
    setup() {
        const number = ref(0)
        const number1 = ref(0)
        const number2 = ref(0)
        const number3 = ref(0)
        const isShowModal = ref(true)
        const change = () => {
            isShowModal.value = !isShowModal.value
        }
        const add = () => {
            number.value = number.value + 1;
        };
        const reduce = () => {
            number.value = number.value - 1;
        };
        const add1 = () => {
            number1.value = number1.value + 1;
        };
        const reduce1 = () => {
            number1.value = number1.value - 1;
        };
        const add2 = () => {
            number2.value = number2.value + 1;
        };
        const reduce2 = () => {
            number2.value = number2.value - 1;
        };
        const add3 = () => {
            number3.value = number3.value + 1;
        };
        const reduce3 = () => {
            number3.value = number3.value - 1;
        };
        return {
            navData,
            number,
            number1,
            number2,
            number3,
            add,
            reduce,
            add1,
            reduce1,
            add2,
            reduce3,
            add3,
            reduce2,
            isShowModal,
            change
        }
    }
};
</script>
<style>
.index-mid-mid{
    display: flex;
    justify-content: space-around;
}

.details-top {
  display: flex;
  align-items: center;
}

.details-top .details-top-left {
  margin-left: 18px;
  margin-top: 21px;
}

.details-top .details-top-left img {
  width: 12px;
  height: 21px;
}

.details-input-wrapper {
  display: flex;
  align-items: center;
  width: 310px;
  height: 32px;
  background: #f5f5f5;
  border-radius: 16px;
  margin-left: 16px;
  margin-top: 21px;
}

.details-input-wrapper img {
  width: 19px;
  height: 19px;
  padding: 6px;
  padding-left: 16px;
}

.details-input-wrapper .details-input1 {
  background: #f5f5f5;
  border: none;
  border-style: none;
  outline: none;
  width: 234px;
  height: 32px;
}

.details-content {
  width: 375px;
  height: 470px;
  margin-top: 16px;
}

.details-content .details-content-left {
  width: 76px;
  height: 470px;
  position: absolute;
  background: #f5f5f5;
  border-radius: 2px;
}

.details-content .details-content-left .details-left-wrapper1 {
  width: 76px;
  height: 40px;
  background: #ffffff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.details-content .details-content-left .details-left-wrapper {
  background: #f5f5f5;
  border-radius: 2px;
  width: 76px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.details-content .details-content-left .details-left-wrapper1 span {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  line-height: 16px;
}

.details-content .details-content-left .details-left-wrapper span {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  line-height: 16px;
}

.details-content .details-content-right {
  width: 299px;
  height: 100px;
  margin-left: 76px;
  background: #fff;
  border-radius: 2px;
  display: flex;
}

.details-content .details-content-right .details-content-right-left {
  margin-left: 16px;
  display: flex;
}

.details-content .details-content-right .details-content-right-left .details-content-right-left-zuo {
  margin-top: 12px;
}

.details-content .details-content-right .details-content-right-left .details-content-right-left-zuo img {
  width: 68px;
  height: 68px;
}

.details-content .details-content-right .details-content-right-left .details-content-right-left-you {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  margin-left: 16px;
}

.details-content .details-content-right .details-content-right-left .details-content-right-left-you .details-content-right-left-you-top {
  display: flex;
  flex-direction: column;
}

.details-content .details-content-right .details-content-right-left .details-content-right-left-you .details-content-right-left-you-top span:nth-child(1) {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #333333;
}

.details-content .details-content-right .details-content-right-left .details-content-right-left-you .details-content-right-left-you-top span:nth-child(2) {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333333;
  line-height: 16px;
  margin-top: 6px;
}

.details-content .details-content-right .details-content-right-left .details-content-right-left-you .details-content-right-left-you-bottom {
  margin-top: 6px;
}

.details-content .details-content-right .details-content-right-left .details-content-right-left-you .details-content-right-left-you-bottom span:nth-child(1) {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #e93b3b;
  line-height: 20px;
}

.details-content .details-content-right .details-content-right-left .details-content-right-left-you .details-content-right-left-you-bottom span:nth-child(2) {
  font-family: PingFangSC-Regular;
  font-size: 10px;
  color: #999999;
  line-height: 20px;
  margin-left: 12px;
  text-decoration: line-through;
}

.details-content .details-content-right .details-content-right-right {
  margin-top: 42px;
  margin-left: 22px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 85px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  line-height: 16px;
}

.details-content .details-content-right .details-content-right-right .fixed {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.details-content .details-fgx {
  width: 265px;
  height: 1px;
  background: #f1f1f1;
  margin-left: 92px;
  margin-bottom: 8px;
}

.details-bottom {
  border-top: #f1f1f1 1px solid;
  height: 49px;
  width: 375px;
  position: fixed;
  bottom: 0px;
  box-shadow: 0 -1px 1px 0 #f1f1f1;
}

.details-bottom .admit-bottom-left {
  width: 277px;
  height: 49px;
  position: absolute;
  display: flex;
  align-items: center;
}

.details-bottom .admit-bottom-left span:nth-child(1) {
  margin-left: 24px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  text-align: right;
  line-height: 20px;
}

.details-bottom .admit-bottom-left span:nth-child(2) {
  font-family: PingFangSC-Medium;
  margin-left: 6px;
  font-size: 16px;
  color: #333333;
  text-align: right;
  line-height: 22px;
}

.details-bottom .details-bottom-left {
  width: 277px;
  height: 49px;
  position: absolute;
  display: flex;
  align-items: center;
}

.details-bottom .details-bottom-left .detail-image {
  margin-left: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.details-bottom .details-bottom-left .detail-writting {
  margin-left: 32px;
}

.details-bottom .details-bottom-left .detail-writting span:nth-child(1) {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333333;
}

.details-bottom .details-bottom-left .detail-writting span:nth-child(2) {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #e93b3b;
}

.details-bottom .details-bottom-right {
  width: 98px;
  height: 49px;
  background: #4fb0f9;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 277px;
}

.discount_wrapper {
  top: 0;
  position: absolute;
  height: 425px;
  width: 375px;
  background-color: rgba(0, 0, 0, 0.5);
}

.main_discount {
  margin-top: 425px;
  width: 375px;
  height: 225px;
  background: #ffffff;
}

.mask-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: #f1f1f1 solid 1px;
}

.mask-top .main_discount-left {
  margin-left: 18px;
  margin-top: 16px;
  display: flex;
  align-items: center;
}

.mask-top .main_discount-left span {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  line-height: 16px;
  margin-left: 8px;
}

.mask-top .main_discount-right {
  margin-top: 18px;
  margin-right: 18px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  text-align: right;
  line-height: 16px;
}

.mask-content {
  display: flex;
  margin-top: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.mask-content .mask-content-left {
  display: flex;
  align-content: center;
  margin-left: 18px;
}

.mask-content .mask-content-left .mask-content-left-left {
  display: flex;
  align-items: center;
}

.mask-content .mask-content-left .mask-content-left-left img:nth-child(2) {
  margin-left: 16px;
}

.mask-content .mask-content-left-right {
  margin-left: 16px;
}

.mask-content .mask-content-left-right .mask-content-left-top {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #333333;
}

.mask-content .mask-content-left-right .mask-content-left-bottom {
  margin-top: 6px;
}

.mask-content .mask-content-left-right .mask-content-left-bottom span:nth-child(1) {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #e93b3b;
  line-height: 20px;
}

.mask-content .mask-content-left-right .mask-content-left-bottom span:nth-child(2) {
  font-family: PingFangSC-Regular;
  font-size: 10px;
  color: #999999;
  line-height: 20px;
  margin-left: 12px;
  text-decoration: line-through;
}

.mask-content .mask-content-right {
  margin-left: 81px;
  display: flex;
  align-items: center;
}

.mask-content .mask-content-right span {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  text-align: center;
  line-height: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

</style>